﻿@using LeadMaster.Models
@model LeadMaster.ViewModels.ViewModelSchedules

@{
    ViewBag.Title = "Edit";
}
<div class="spacer"></div>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Edit A Schedule Template</legend>
        @Html.HiddenFor(model => model.ScheduleTemplate.ScheduleTemplateID)
        @Html.HiddenFor(model => model.ScheduleTemplate.AgreementReport)
        <div class="editor-label">
            @Html.LabelFor(model => model.ScheduleTemplate.Title)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.ScheduleTemplate.Title, new { @class = "largetextbox" })
            @Html.ValidationMessageFor(model => model.ScheduleTemplate.Title)
        </div>
        <div class="spacer"></div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ScheduleTemplate.HeaderText)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.ScheduleTemplate.HeaderText, new { @class = "bignotes" })
            @Html.DropDownListFor(model => model.holdingSectionMerge, new SelectList(Model.SectionMerges, "Markup", "Description"), new { })
            <input type="button" id="buttonMerge" value="Insert Merge Field" />
            @Html.ValidationMessageFor(model => model.ScheduleTemplate.HeaderText)
        </div>
        <div class="spacer"></div>
        @{
            int divSection = 0;
        }
        @foreach (ScheduleTemplateSection item in Model.ScheduleTemplateSections)
        {
            <div id="ScheduleTemplateSection_@(divSection)">
                <div class="spacer"></div>
                <div class="editor-label">
                    <label>@item.ScheduleSection.FieldHeader</label>
                </div>
                <div class="editor-field">
                    @Html.HiddenFor(m => m.ScheduleTemplateSections[divSection].ScheduleSectionsID, new { @class="hiddensections" })
                    @Html.HiddenFor(m => m.ScheduleTemplateSections[divSection].ScheduleTemplateID, new { @class = "hiddensections" })
                    @Html.HiddenFor(m => m.ScheduleTemplateSections[divSection].ScheduleTemplateSectionsID, new { @class = "hiddensections" })
                    @Html.HiddenFor(m => m.ScheduleTemplateSections[divSection].DisplayOrder, new { @class = "hiddensections" })

                    @Html.TextAreaFor(model => item.ScheduleSection.Content, new { @class = "bignotes", @readonly=true })
                    <img src="~/Images/Up.png" class="smallarrows" name="up" id="imgup@(divSection)" />
                    <img src="~/Images/Down.png" class="smallarrows" name="down" id="imgdown@(divSection)" />
                    <a href="@(Url.Action("DeleteSection", "Schedules", new { scheduleTemplateSectionID = item.ScheduleTemplateSectionsID }))">
                    <img src="~/Images/delete.ico" class="smallarrows" name="delete" id="delete@(item.ScheduleTemplateSectionsID)" />
                    </a>
                    @Html.ValidationMessageFor(model => item.ScheduleSection.Content)
                </div>
            </div>
            divSection++;
        }
        <div class="spacer"></div>
        <input type="button" value="Add Section" id="btnAddSection"/>
         <div class="spacer"></div>
        <p>
            <input type="submit" value="Save" class="bigsubmit" />
        </p>
    </fieldset>
}
<div id="addsection" title="Add A Legal Section">
</div>

<input type="hidden" id="hdnCursorPosition" value="0" />
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script type="text/javascript">
    $(document).ready(function () {

        $('#btnAddSection').click(function () {
            $('#addsection').load('@Url.Action("AddSection")?ScheduleTemplateID=@(Model.ScheduleTemplate.ScheduleTemplateID)', function () {
                $('#addsection').dialog(
                    {
                        autoOpen: true,
                        width: 620,
                        height: 500,
                        modal: true,
                        buttons: {
                            save: function () {
                                $(this).dialog("close");
                                $("#formaddsection").submit();
                            }
                        }
                    }
                );
            });
        });

        $('.smallarrows').click(function () {
            if (this.name == "up") {
                var currentID = this.id.substring(5);
                var divsection = "#ScheduleTemplateSection_" + currentID;
                var prevID = parseInt(this.id.substring(5)) - 1;
                var prevsection = "#ScheduleTemplateSection_" + prevID.toString();
                $(divsection).insertBefore($(prevsection));
                // place current Div and Image UP into holding value 1000
                $(divsection).attr("id", "ScheduleTemplateSection_1000");
                $('#imgup' + currentID).attr("id", 'imgup1000');
                $('#imgdown' + currentID).attr("id", 'imgdown1000');
                $('#ScheduleTemplateSections_' + currentID + '__ScheduleSectionsID').attr("id", 'ScheduleTemplateSections_1000__ScheduleSectionsID');
                $('#ScheduleTemplateSections_' + currentID + '__ScheduleTemplateID').attr("id", 'ScheduleTemplateSections_1000__ScheduleTemplateID');
                $('#ScheduleTemplateSections_' + currentID + '__ScheduleTemplateSectionsID').attr("id", 'ScheduleTemplateSections_1000__ScheduleTemplateSectionsID');
                $('#ScheduleTemplateSections_' + currentID + '__DisplayOrder').val(prevID.toString());
                $('#ScheduleTemplateSections_' + currentID + '__DisplayOrder').attr("id", 'ScheduleTemplateSections_1000__DisplayOrder');
                // update previous Div and Image UP to current values
                $(prevsection).attr("id", "ScheduleTemplateSection_" + currentID);
                $('#imgup' + prevID.toString()).attr("id", 'imgup' + currentID);
                $('#imgdown' + prevID.toString()).attr("id", 'imgdown' + currentID);
                $('#ScheduleTemplateSections_' + prevID.toString() + '__ScheduleSectionsID').attr("id", 'ScheduleTemplateSections_' + currentID + '__ScheduleSectionsID');
                $('#ScheduleTemplateSections_' + prevID.toString() + '__ScheduleTemplateID').attr("id", 'ScheduleTemplateSections_' + currentID + '__ScheduleTemplateID');
                $('#ScheduleTemplateSections_' + prevID.toString() + '__ScheduleTemplateSectionsID').attr("id", 'ScheduleTemplateSections_' + currentID + '__ScheduleTemplateSectionsID');
                $('#ScheduleTemplateSections_' + prevID.toString() + '__DisplayOrder').val(currentID);
                $('#ScheduleTemplateSections_' + prevID.toString() + '__DisplayOrder').attr("id", 'ScheduleTemplateSections_' + currentID + '__DisplayOrder');
                // now update the holding 1000 Div and Image UP to previous values
                $("#ScheduleTemplateSection_1000").attr("id", "ScheduleTemplateSection_" + prevID.toString());
                $('#imgup1000').attr("id", 'imgup' + prevID.toString());
                $('#imgdown1000').attr("id", 'imgdown' + prevID.toString());
                $('#ScheduleTemplateSections_1000__ScheduleSectionsID').attr("id", 'ScheduleTemplateSections_' + prevID.toString()+ '__ScheduleSectionsID');
                $('#ScheduleTemplateSections_1000__ScheduleTemplateID').attr("id", 'ScheduleTemplateSections_' + prevID.toString() + '__ScheduleTemplateID');
                $('#ScheduleTemplateSections_1000__ScheduleTemplateSectionsID').attr("id", 'ScheduleTemplateSections_' + prevID.toString() + '__ScheduleTemplateSectionsID');
                $('#ScheduleTemplateSections_1000__DisplayOrder').attr("id", 'ScheduleTemplateSections_' + prevID.toString() + '__DisplayOrder');
            }
            else if (this.name == "down") {
                var currentID = this.id.substring(7);
                var divsection = "#ScheduleTemplateSection_" + this.id.substring(7);
                var nextID = parseInt(this.id.substring(7)) + 1;
                var nextsection = "#ScheduleTemplateSection_" + nextID.toString();
                $(divsection).insertAfter($(nextsection));
                // place current Div and Image UP into holding value 1000
                $(divsection).attr("id", "ScheduleTemplateSection_1000");
                $('#imgup' + currentID).attr("id", 'imgup1000');
                $('#imgdown' + currentID).attr("id", 'imgdown1000');
                $('#ScheduleTemplateSections_' + currentID + '__ScheduleSectionsID').attr("id", 'ScheduleTemplateSections_1000__ScheduleSectionsID');
                $('#ScheduleTemplateSections_' + currentID + '__ScheduleTemplateID').attr("id", 'ScheduleTemplateSections_1000__ScheduleTemplateID');
                $('#ScheduleTemplateSections_' + currentID + '__ScheduleTemplateSectionsID').attr("id", 'ScheduleTemplateSections_1000__ScheduleTemplateSectionsID');
                $('#ScheduleTemplateSections_' + currentID + '__DisplayOrder').val(nextID.toString());
                $('#ScheduleTemplateSections_' + currentID + '__DisplayOrder').attr("id", 'ScheduleTemplateSections_1000__DisplayOrder');
                // update previous Div and Image UP to current values
                $(nextsection).attr("id", "ScheduleTemplateSection_" + currentID);
                $('#imgup' + nextID.toString()).attr("id", 'imgup' + currentID);
                $('#imgdown' + nextID.toString()).attr("id", 'imgdown' + currentID);
                $('#ScheduleTemplateSections_' + nextID.toString() + '__ScheduleSectionsID').attr("id", 'ScheduleTemplateSections_' + currentID + '__ScheduleSectionsID');
                $('#ScheduleTemplateSections_' + nextID.toString() + '__ScheduleTemplateID').attr("id", 'ScheduleTemplateSections_' + currentID + '__ScheduleTemplateID');
                $('#ScheduleTemplateSections_' + nextID.toString() + '__ScheduleTemplateSectionsID').attr("id", 'ScheduleTemplateSections_' + currentID + '__ScheduleTemplateSectionsID');
                $('#ScheduleTemplateSections_' + nextID.toString() + '__DisplayOrder').val(currentID);
                $('#ScheduleTemplateSections_' + nextID.toString() + '__DisplayOrder').attr("id", 'ScheduleTemplateSections_' + currentID + '__DisplayOrder');
                // now update the holding 1000 Div and Image UP to previous values
                $("#ScheduleTemplateSection_1000").attr("id", "ScheduleTemplateSection_" + nextID.toString());
                $('#imgup1000').attr("id", 'imgup' + nextID.toString());
                $('#imgdown1000').attr("id", 'imgdown' + nextID.toString());
                $('#ScheduleTemplateSections_1000__ScheduleSectionsID').attr("id", 'ScheduleTemplateSections_' + nextID.toString() + '__ScheduleSectionsID');
                $('#ScheduleTemplateSections_1000__ScheduleTemplateID').attr("id", 'ScheduleTemplateSections_' + nextID.toString() + '__ScheduleTemplateID');
                $('#ScheduleTemplateSections_1000__ScheduleTemplateSectionsID').attr("id", 'ScheduleTemplateSections_' + nextID.toString() + '__ScheduleTemplateSectionsID');
                $('#ScheduleTemplateSections_1000__DisplayOrder').attr("id", 'ScheduleTemplateSections_' + nextID.toString() + '__DisplayOrder');
            }
        });

        $("#buttonMerge").click(function () {
            var newText = $("#ScheduleTemplate_HeaderText").val().substring(0, $("#hdnCursorPosition").val());
            newText += $("#holdingSectionMerge").val();
            newText += $("#ScheduleTemplate_HeaderText").val().substring($("#hdnCursorPosition").val());
            $("#ScheduleTemplate_HeaderText").val(newText);
        });

        $("#ScheduleTemplate_HeaderText").focusout(function () {
            var posInBox = $("#ScheduleTemplate_HeaderText").getCursorPosition();
            $("#hdnCursorPosition").val(posInBox.toString());
        });


        (function ($, undefined) {
            $.fn.getCursorPosition = function () {
                var el = $(this).get(0);
                var pos = 0;
                if ('selectionStart' in el) {
                    pos = el.selectionStart;
                } else if ('selection' in document) {
                    el.focus();
                    var Sel = document.selection.createRange();
                    var SelLength = document.selection.createRange().text.length;
                    Sel.moveStart('character', -el.value.length);
                    pos = Sel.text.length - SelLength;
                }
                return pos;
            }
        })(jQuery);

    });
</script>
